<template>
  <div class="h-[480px] w-[100vw] articles-bg">
    <div id="stars"></div>
    <div id="stars2"></div>
    <div id="stars3"></div>
    <div id="title">
      <div>文章详情</div>
      <div>有趣的人记录有趣的事</div>
      <n-breadcrumb>
        <n-breadcrumb-item @click="navigateTo('/')">
          <n-icon :component="Home" />
        </n-breadcrumb-item>
        <n-breadcrumb-item @click="navigateTo('/articles')">
          博文列表
        </n-breadcrumb-item>
        <n-breadcrumb-item> 文章详情 </n-breadcrumb-item>
      </n-breadcrumb>
    </div>
  </div>

  <div class="px-4 mx-auto sm:px-6 xl:max-w-5xl xl:px-0 my-10">
    <ContentDoc class="prose max-w-full">
      <template #not-found>
        <n-empty description="是一个飞机">
          <template #icon>
            <n-icon>
              <Airplane />
            </n-icon>
          </template>
          <template #extra>
            <n-button size="small" @click="navigateTo('/articles')">
              看看别的
            </n-button>
          </template>
        </n-empty>
      </template>
    </ContentDoc>
  </div>

  <n-float-button
    :right="50"
    :bottom="50"
    shape="circle"
    type="primary"
    @click="scrollToTop()"
  >
    <n-icon>
      <ArrowUp />
    </n-icon>
  </n-float-button>
</template>

<script setup lang="ts">
import { ArrowUp, Home, Airplane } from "@vicons/ionicons5";
import "@/assets/less/articles.less";
import { scrollToTop } from "@/utils/tool";
</script>

<style scoped>
.content {
  min-width: 100%;
}
</style>
